<template>
    <div class="box">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Input v-model="searchObj.credential_code" class="search-input" clearable placeholder="请输入凭证码"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.id_card" class="search-input" clearable placeholder="请输入身份证号"/>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="importExcel">
                        <Icon type="ios-cloud-upload-outline"/>
                        数据导入
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-toolbar export custom></vxe-toolbar>
            <vxe-table
                    border
                    resizable
                    highlight-hover-row
                    export-config
                    height="500"
                    size="medium"
                    show-overflow="tooltip"
                    :loading="tableLoading"
                    align="center"
                    header-align="center"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData"
                    :checkbox-config="{checkField: 'checked'}">
                <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                <vxe-table-column field="name" title="姓名" min-width="100"></vxe-table-column>
                <vxe-table-column field="id_card" title="身份证号" min-width="200"></vxe-table-column>
                <vxe-table-column field="credential_code" title="凭证码" min-width="200"></vxe-table-column>
                <vxe-table-column field="open_id" min-width="230" title="open_id"></vxe-table-column>
                <vxe-table-column field="activity_id" title="活动id" min-width="230"></vxe-table-column>
                <vxe-table-column field="type" title="卡券类型" min-width="100">
                    <template v-slot="{ row }">
                        <span>{{ row.type=='XF'?'消费券':'综合券'}} </span>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="win_time" title="中奖时间" min-width="230"></vxe-table-column>
                <vxe-table-column field="send_msg_state" title="推送消息" min-width="100">
                    <template v-slot="{ row }">
                        <span v-if="row.send_msg_state=='0'">未推送</span>
                        <span v-if="row.send_msg_state=='1'">已推送</span>
                        <span v-if="row.send_msg_state=='2'">失败</span>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </Row>
        <Row type="flex" justify="end">
            <Page show-total :current="pageObj.page" :page-size="pageObj.pageSize" :total="pageObj.totalRecord" @on-change="getPageNo"/>
        </Row>
    </div>
</template>

<script>
import { selectCoupon } from '@/api/customer-service'

export default {
  components: {},
  data () {
    return {
      pageObj: {
        page: 1,
        pageSize: 10,
        totalRecord: 0
      },
      searchObj: {},
      tableData: [],
      selectData: [],
      tableLoading: false
    }
  },
  methods: {
    searchAction () {
      this.init()
    },
    init () {
      let data = {
        page: this.pageObj.page,
        pageSize: this.pageObj.pageSize,
        credential_code: this.searchObj.credential_code,
        id_card: this.searchObj.id_card }
      this.tableLoading = true
      selectCoupon(data).then(ret => {
        let data = ret.data
        if (data.errcode === 200) {
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (page) {
      this.pageObj.page = page
      this.init()
    },
    initPage () {
      this.pageObj.page = 1
      this.pageObj.pageSize = 10
    },
    importExcel () {
      this.$router.push({
        name: 'excelImport',
        query: { type: 'coupon' }
      })
    }
  },
  mounted () {
    const param = {
      page: this.pageObj.page,
      pageSize: this.pageObj.pageSize
    }
    this.init(param)
  }
}
</script>

<style scoped>
    .ivu-form-item {
        margin-bottom: 0;
    }
    .box{
        margin-bottom: 50px;
    }
</style>
